<template>
  <div class="my-container">
    <van-cell-group v-if="userToken" class="my-info">
      <van-cell class="base-info" :border=false center>
        <template #icon>
          <van-image
            class="avatar"
            round
            fit="cover"
            src="userInfo.photo"
          />
        </template>
        <template #title>
          <span class="name">{{userInfo.name}}</span>
        </template>
        <van-button
          size="small"
          class="editBtn"
          round
          to="/user/profile"
        >编辑资料</van-button>
      </van-cell>
      <van-grid :border=false class="data-info">
        <van-grid-item  class="data-info-item">
          <template #text>
            <div class="count">{{userInfo.art_count}}</div>
            <div class="text-warp">头条</div>
          </template>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <template #text>
            <div class="count">{{userInfo.follow_count}}</div>
            <div class="text-warp">关注</div>
          </template>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <template #text>
            <div class="count">{{userInfo.fans_count}}</div>
            <div class="text-warp">粉丝</div>
          </template>
        </van-grid-item>
        <van-grid-item class="data-info-item">
          <template #text>
            <div class="count">{{userInfo.like_count}}</div>
            <div class="text-warp">获赞</div>
          </template>
        </van-grid-item>
      </van-grid>
    </van-cell-group>
    <div v-else class="not-login" @click="$router.push({
        name: 'login',
        query: {
          redirect: '/my'
        }
      })">
      <img class="mobile" src="./mobile.png">
      <div class="text">登录/注册</div>
    </div>
    <van-grid :column-num="2" :border=false  class="md-4">
      <van-grid-item icon-prefix="zhangyu" icon="shoucang" text="收藏" />
      <van-grid-item icon-prefix="zhangyu" icon="lishi" text="历史" />
    </van-grid>
    <van-cell title="消息通知" is-link url="/vant/mobile.html" />
    <van-cell class="md-4" title="小智同学" is-link to="/user/chat"/>
    <van-cell v-if="userToken" class="logout-cell" title="退出登录" @click="onLogout" />
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getCurrentUser } from '@/apis/user'
export default {
  name: 'MyIndex',
  data () {
    return {
      userInfo: {}
    }
  },
  computed: {
    ...mapState([
      'userToken'
    ])
  },
  created () {
    if (this.$store.state.userToken) {
      this.getUerInfo()
    }
  },
  methods: {
    onLogout () {
      this.$dialog.confirm({
        title: '退出提示',
        message: '确认退出吗'
      }).then(() => {
        // 清除用户状态
        this.$store.commit('SET_TOKEN', null)
      }).catch(() => {})
    },
    async getUerInfo () {
      const { data } = await getCurrentUser()
      this.userInfo = data.data
    }
  }
}
</script>
<style lang="less" scoped>
.my-container{
  .my-info {
    background: url("./banner.png") no-repeat;
    background-size: cover;
    .base-info{
      background-color:unset;
      height: 115px;
      box-sizing: border-box;
      padding-top: 38px;
      padding-bottom: 12px;
    }
    .avatar{
      width: 66px;
      height: 66px;
      box-sizing: border-box;
      border: 1px solid #fff;
      margin-right: 11px;
    }
    .name{
      color:#fff;
      font-size: 15px;
    }
    .editBtn{
      height: 16px;
      font-size: 10px;
      color: #666;
      vertical-align: middle;
    }
    .data-info{
      .data-info-item{
        height: 65px;
        color: #fff;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        .count{
          font-size: 18px;
          margin-bottom:5px;
        }
        .text-warp{
          font-size: 11px;
        }
      }
    }
    /deep/.van-grid-item__content{
       background-color:unset
    }
  }
  .not-login{
    height: 180px;
    background:url("./banner.png") no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .mobile{
      width: 66px;
      height: 66px;
      margin-bottom:10px;
    }
    .text{
      font-size: 14px;
      color: #fff;
    }
  }
   /deep/.van-grid{
    .van-grid-item{
      height: 70px;
      .zhangyu{
        font-size: 22px;
      }
      .zhangyu-shoucang{
        color: #eb5253;
      }
      .zhangyu-lishi{
        color: #ff9d1d;
      }
      .van-grid-item__text{
        font-size: 14px;
        color: #333;
      }
    }
  }
  .logout-cell{
    text-align: center;
    color: #d86262;
  }
  .md-4{
    margin-bottom: 4px;
  }
}

</style>
